<template>
  <div id="user-form">
    <h3>个人资料</h3>
    <group class="person-message">
      <x-address title="请选择省市" value-text-align="left" v-model="value4" placeholder="选择省市" raw-value :list="addressData" hide-district ></x-address>
      <cell class="city-val" :value="getName(value4)"></cell>
      <x-input title="姓名" class="namecode"  v-model="nameval" ref="name01"  name="username" placeholder="请输入姓名" is-type="china-name"></x-input>
      <x-input title="身份证" class="ipcode"  v-model="identityCard" type="text"  placeholder="请输入身份证号"  ></x-input>
    </group>
    <h3 v-if="loanShow">借款信息</h3>
    <h3 v-if="!loanShow">信用卡申请信息</h3>
    <group class="borrow-message" v-if="loanShow">
      <x-input title="借款金额" class="usermoney" type="number" v-model="money" placeholder="输入金额(元)" ></x-input>
      <popup-picker  title="借款期限" class="usermoney" :data="list2" v-model="value2"  :placeholder="'选择期限'" value-text-align="left"></popup-picker>
    </group>
    <group class="borrow-message" v-if="!loanShow">
      <popup-picker  title="申请额度" class="usermoney" :data="list3" v-model="value3"  :placeholder="'选择申请额度'" value-text-align="left"></popup-picker>
      <popup-picker  title="取现比例" class="usermoney" :data="list5" v-model="value5"  :placeholder="'选择取现比例'" value-text-align="left"></popup-picker>
    </group>
    <div class="share" @click="apply">开始申请</div>
    <div v-transfer-dom class="XDialog_img">
      <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur @on-hide="closeDialog">
        <div class="img-box">
          <img src="../../static/img/form-hn.png" style="max-width:100%" @click="imgClose">
        </div>
        <div @click="showHideOnBlur=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
    <div v-transfer-dom class="XDialog_img">
      <x-dialog v-model="filterShow" class="dialog-demo" hide-on-blur @on-hide="closeFilterDialog">
        <div class="img-box filter_popup">
          <div class="filter_popup_head">申请失败，请稍后再试！</div>
          <p class="filter_popup_content" v-for="(f, index) in fliterList" :key="index">
            <span class="filter_popup_title">我们推荐您使用<span> [{{f}}] </span>继续完成借款</span>
            <span class="filter_popup_text"   @click="filterClick(index)">{{f}}</span>
          </p>
          <p class="filter_popup_title">或者您可以参加我们的活动</p>
          <p class="filter_popup_content">
            <span class="filter_popup_text" @click="activity">前往抽奖活动</span>
          </p>
        </div>
        <div @click="filterShow=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import { Group, XAddress, ChinaAddressV4Data, Cell, Value2nameFilter as value2name, XInput, PopupPicker, XDialog, TransferDomDirective as TransferDom } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      item: {},
      loanShow: true,
      addressData: ChinaAddressV4Data,
      value4: [],
      value4city: '',
      value2: [],
      list2: [['1个月', '3个月', '6个月', '12个月', '18个月', '24个月']],
      value3: [],
      list3: [['3000', '5000', '8000', '10000', '20000', '50000', '100000']],
      value5: [],
      list5: [['30%', '50%', '100%']],
      fliterList: ['房司令','省呗','你我贷','超人卡'],
      urlList:[
        'http://zujin.58fangdai.com/h5/register5/index?linksource=xddl',
        'https://www.smyfinancial.com/mx/?qd=bddm1801&cy=dumiao1&hd=&saoma=y',
        'https://ka.niwodai.com/loans-mobile/event.do?method=tg&a=5820160000021462&nwd_ext_aid=5020162305363928&source_id=yxd',
        'https://xbdapp.chainfin.com/loanApp/s/45483'
      ],
      nameval: '',
      identityCard: '',
      money: null,
      tokenval: '',
      showHideOnBlur: false,
      filterShow: false,
      formUrl: '' // 跳转链接
    }
  },
  components: {
    Group,
    XAddress,
    Cell,
    XInput,
    PopupPicker,
    XDialog
  },
  created () {
    window.document.title = '用户表单'
    this.tokenval = utils.AnonToken(timeStamp)
    var province = []
    var city = []
    var params = {
      userId: this.$store.state.userID || '',
      partnerId: utils.getQueryString('partnerId')
    }
    api.creditloanDetail(params).then(res => {
      console.log(res)
      if (res.status === '200') {
        this.item = res.data
        if (parseFloat(this.item.partnerType) === 1) {
          this.loanShow = true
        } else if (parseFloat(this.item.partnerType) === 3) {
          this.loanShow = false
        }
      }
    })
    api.getLatest({
      token: this.tokenval,
      timestamp: timeStamp,
      userId: utils.getQueryString('userId'),
      mobile: utils.getQueryString('userMobile'),
      partnerId: utils.getQueryString('partnerId'),
      vcode: utils.getQueryString('userVcode')
    }).then(res => {
      console.log(res)
      if (res.status === '200') {
        if (res.data) {
          province.push(res.data.province)
          city.push(res.data.city)
          province = province.concat(city)
          this.value4 = province
          this.nameval = res.data.customerName
          this.identityCard = res.data.idCard
        }
      }
    })
    if (utils.getQueryString('partnerId') === 'dumiao-full') {
      this.money = 5000
    } else if (utils.getQueryString('partnerId') === 'jiufu') {
      this.money = 500
    } else if (utils.getQueryString('partnerId') === 'paipaidai') {
      this.money = 1000
    } else if (utils.getQueryString('partnerId') === 'dmqyqb') {
      this.list2 = [['6个月', '9个月', '12个月']]
    } else {
      this.money = ''
    }
  },
  methods: {
    getName (value) {
      this.value4city = value2name(value, ChinaAddressV4Data)
    },
    apply () {
      var nameReg = /[\u4e00-\u9fa5]/
      var self = this
      if (this.value4city === '') {
        this.$vux.toast.show({
          text: '请选择省市',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.nameval === '') {
        this.$vux.toast.show({
          text: '请输入姓名',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.$refs.name01.valid === false) {
        this.$vux.toast.show({
          text: '请输入正确名字',
          type: 'warn',
          width: '4rem'
        })
      } else if (nameReg.test(this.nameval) === false) {
        this.$vux.toast.show({
          text: '名字必须为中文',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.identityCard === '') {
        this.$vux.toast.show({
          text: '请输入身份证号',
          type: 'warn',
          width: '4rem'
        })
      } else if (utils.ipcard(this.identityCard) !== true) {
        this.$vux.toast.show({
          text: utils.ipcard(self.identityCard),
          type: 'warn',
          width: '4rem'
        })
      } else if (this.loanShow === true) {
        if (this.money === null) {
          this.$vux.toast.show({
            text: '请输入借款金额',
            type: 'warn',
            width: '4rem'
          })
        } else if (this.money > 50000 && utils.getQueryString('partnerId') === 'dumiao-full') {
          this.$vux.toast.show({
            text: '借款金额不能超过5万',
            type: 'warn',
            width: '5rem'
          })
        } else if (this.money > 100000 && utils.getQueryString('partnerId') === 'jiufu') {
          this.$vux.toast.show({
            text: '借款金额不能超过10万',
            type: 'warn',
            width: '5rem'
          })
        } else if (this.money > 10000 && utils.getQueryString('partnerId') === 'paipaidai') {
          this.$vux.toast.show({
            text: '借款金额不能超过1万',
            type: 'warn',
            width: '5rem'
          })
        } else if (this.money > 100000 && utils.getQueryString('partnerId') === 'dmqyqb') {
          this.$vux.toast.show({
            text: '借款金额不能超过10万',
            type: 'warn',
            width: '5rem'
          })
        } else if (this.money < 5000 && utils.getQueryString('partnerId') === 'dmqyqb') {
          this.$vux.toast.show({
            text: '借款金额不能小于5千',
            type: 'warn',
            width: '5rem'
          })
        } else if (this.money / 100 !== parseInt(this.money / 100) && utils.getQueryString('partnerId') !== 'dmqyqb') {
          this.$vux.toast.show({
            text: '金额必须为100的整数',
            type: 'warn',
            width: '5rem'
          })
        } else if (this.money / 1000 !== parseInt(this.money / 1000) && utils.getQueryString('partnerId') === 'dmqyqb') {
          this.$vux.toast.show({
            text: '金额必须为1000的整数',
            type: 'warn',
            width: '5rem'
          })
        } else if (this.value2.length === 0) {
          this.$vux.toast.show({
            text: '请选择借款期限',
            type: 'warn',
            width: '4rem'
          })
        } else if (utils.getQueryString('userId') == '64642' && utils.getQueryString('partnerId') == 'dumiao-full') {
          this.filterShow = true
          return
        } else {
          this.applyApi()
        }
      } else if (this.loanShow === false) {
        if (this.value3.length === 0) {
          this.$vux.toast.show({
            text: '请选择申请额度',
            type: 'warn',
            width: '4rem'
          })
        } else if (this.value5.length === 0) {
          this.$vux.toast.show({
            text: '请选择取现比例',
            type: 'warn',
            width: '4rem'
          })
        } else {
          this.applyApi()
        }
      }
    },
    applyApi () {
      var self = this
      var postid, picid, userpartnerid, sharechannel, usermobile, uservcode, borrow01, borrow02
      this.$vux.loading.show()
      var provinces = this.value4city.split(' ')[0]
      var citys = this.value4city.split(' ')[1]
      if (citys === '市辖区') {
        citys = this.value4city.split(' ')[0]
      } else {
        citys = this.value4city.split(' ')[1]
      }
      postid = utils.getQueryString('postId')
      picid = utils.getQueryString('picId')
      sharechannel = utils.getQueryString('channel')
      userpartnerid = utils.getQueryString('partnerId')
      usermobile = utils.getQueryString('userMobile')
      uservcode = utils.getQueryString('userVcode')
      if (postid === null || postid === '' || postid === undefined) {
        postid = '-1'
      }
      if (picid === null || picid === '' || picid === undefined) {
        picid = '-1'
      }
      if (sharechannel === null || sharechannel === '' || sharechannel === undefined) {
        sharechannel = '-1'
      }
      if (this.loanShow === true) {
        borrow01 = this.money
        borrow02 = parseFloat(this.value2[0])
      } else if (this.loanShow === false) {
        borrow01 = parseFloat(this.value3[0])
        borrow02 = parseFloat(this.value5[0])
      }
      api.addcustomer({
        token: this.tokenval,
        timestamp: timeStamp,
        userId: utils.getQueryString('userId'),
        applyMoney: borrow01,
        applyTerm: borrow02,
        channel: '-1',
        postId: postid,
        picId: picid,
        partnerId: userpartnerid,
        mobile: usermobile,
        vcode: uservcode,
        idCard: this.identityCard,
        customerName: this.nameval,
        province: provinces,
        city: citys,
        from: 0
      }).then(res => {
        console.log(res)
        if (res.status === '200') {
          if (res.data.insurance === true) {
            self.showHideOnBlur = true
            self.formUrl = res.data.thirdUrl
          } else {
            self.$vux.loading.hide()
            self.showHideOnBlur = false
            window.location.href = res.data.thirdUrl
          }
        } else {
          self.$vux.loading.hide()
          self.showHideOnBlur = false
          if (res.message) {
            self.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
           setTimeout(() => {
              self.$vux.toast.show({
              text: res.data.message,
              type: 'warn',
              width: '4rem',
              time: 5000
            })
            }, 2200)
          } else {
            self.$vux.toast.show({
              text: res.data.message,
              type: 'warn',
              width: '4rem'
            })
          }
        }
      })
    },
    closeDialog () {
      var _this = this
      setInterval(() => {
        _this.$vux.loading.hide()
        window.location.href = _this.formUrl
      }, 800)
    },
    closeFilterDialog () {
      console.log(2)
    },
    filterClick (index) {
      for(var f in this.urlList) {
        if (parseFloat(index) === parseFloat(f)) {
          window.location.href = this.urlList[f]
        }
      }
    },
    activity () {
      window.location.href = 'https://display.intdmp.com/site_login_ijf.htm?app_key=adhu22ce54da4a364c78'
    },
    imgClose () {
      this.showHideOnBlur = false
    },
    ipcard (idcard) { // 验证身份证号
      var Errors = [
        '验证通过!',
        '身份证号码位数不对!',
        '身份证号码出生日期超出范围或含有非法字符!',
        '身份证号码校验错误!',
        '身份证地区非法!'
      ]
      var Y, JYM
      var S, M
      var idcardArray = []
      idcardArray = idcard.split('')
      // 地区检验
      if (this.IdCardGetArea(idcard) === false) return Errors[4]
      // 身份号码位数及格式检验
      var ereg
      switch (idcard.length) {
        case 15:
          if ((parseInt(idcard.substr(6, 2)) + 1900) % 4 === 0 || ((parseInt(idcard.substr(6, 2)) + 1900) % 100 === 0 && (parseInt(idcard.substr(6, 2)) + 1900) % 4 === 0)) {
            ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/ // 测试出生日期的合法性
          } else {
            ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/ // 测试出生日期的合法性
          }
          if (ereg.test(idcard)) return true
          else return Errors[2]
        case 18:
          if (parseInt(idcard.substr(6, 4)) % 4 === 0 || (parseInt(idcard.substr(6, 4)) % 100 === 0 && parseInt(idcard.substr(6, 4)) % 4 === 0)) {
            ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/ // 闰年出生日期的合法性正则表达式
          } else {
            ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/ // 平年出生日期的合法性正则表达式
          }
          if (ereg.test(idcard)) { // 测试出生日期的合法性
            // 计算校验位
            S = (parseInt(idcardArray[0]) + parseInt(idcardArray[10])) * 7 + (parseInt(idcardArray[1]) + parseInt(idcardArray[11])) * 9 + (parseInt(idcardArray[2]) + parseInt(idcardArray[12])) * 10 + (parseInt(idcardArray[3]) + parseInt(idcardArray[13])) * 5 + (parseInt(idcardArray[4]) + parseInt(idcardArray[14])) * 8 + (parseInt(idcardArray[5]) + parseInt(idcardArray[15])) * 4 + (parseInt(idcardArray[6]) + parseInt(idcardArray[16])) * 2 + parseInt(idcardArray[7]) * 1 + parseInt(idcardArray[8]) * 6 + parseInt(idcardArray[9]) * 3
            Y = S % 11
            M = 'F'
            JYM = '10X98765432'
            M = JYM.substr(Y, 1) // 判断校验位
            if (M === idcardArray[17]) return true // 检测ID的校验位
            else return Errors[3]
          } else return Errors[2]
        default:
          return Errors[1]
      }
    },
    IdCardGetArea (idcard) {
      var area = {11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江', 31: '上海', 32: '江苏', 33: '浙江', 34: '安徽', 35: '福建', 36: '江西', 37: '山东', 41: '河南', 42: '湖北', 43: '湖南', 44: '广东', 45: '广西', 46: '海南', 50: '重庆', 51: '四川', 52: '贵州', 53: '云南', 54: '西藏', 61: '陕西', 62: '甘肃', 63: '青海', 64: '宁夏', 65: '新疆', 71: '台湾', 81: '香港', 82: '澳门', 91: '国外'}
      // 地区检验
      if (area[parseInt(idcard.substr(0, 2))] === null) {
        return false
      } else {
        return area[parseInt(idcard.substr(0, 2))]
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .filter_popup{
    background-color: #fff;
    padding: .4rem 0px .5rem 0px;
    font-size: .4rem;
    .filter_popup_head{
      width: 100%;
      background-color: #ef7260;
      padding: .2rem 0px;
      font-size: .5rem;
      text-align: center;
      color: #fff;
    }
     .filter_popup_title{
        color:#000000;
        display: block;
        margin: .3rem 0px .1rem 0px;
        font-size: .4rem;
        span{
          color:#ef7260
        }
      }
      .filter_popup_content{
        text-align: center;
        padding: 0px .2rem;
        .filter_popup_text{
          background-color: #ef7260;
          color: #fff;
          margin-right: .2rem;
          display: inline-block;
          // margin-bottom: .2rem;
          padding: .15rem .3rem;
          width: 70%;
          font-size: .4rem;
          border-radius: .2rem;
        }
      }

  }
</style>

